<template>
  <div>
    <van-nav-bar title="登录" />
    <van-form @submit="onSubmit" validate-trigger="onSubmit">
      <van-field v-model="user.email" name="email" label="网易邮箱" placeholder="网易邮箱" :rules="[{ required: true, message: '请填写正确邮箱', pattern: /[1-9][0-9]{4,}@163.com/ }]" />
      <van-field v-model="user.password" autoComplete="true" type="password" label="密码" name="password" placeholder="密码" :rules="[{ required: true, message: '密码必须6~12位', pattern: /^[^\u4e00-\u9fa5 ]{6,16}$/ }]" />
      <van-checkbox v-model="checked" checked-color="#6ed9a2">同意《忘忧日记隐私政策》</van-checkbox>
      <div class="buttonBox">
        <van-button type="primary" round block native-type="submit" v-if="btn">登录</van-button>
        <van-button type="primary" round block disabled v-else>登录</van-button>
      </div>
    </van-form>
    <div class="sjzc">
      <div class="left" @click="registerFn">邮箱注册</div>
      <div class="right" @click="forgetFn">忘记密码</div>
    </div>
    <!-- 提示用户 -->
    <van-divider >
    <span>亲~您可以使用测试账号登录哟~ </span>
    <span>默认密码：123456</span>
    <span>当然你也可以自己用网易邮箱注册啦</span>
    </van-divider>
    <!-- 登录中加载动画 通知-->
    <LNotify :visible="visibleShow" :loading="loadingShow" :title="loginErr">
      <template #iconOk v-if="iconOk">
        <van-icon name="thumb-circle" class="iconOk"/>
      </template>
      <template #iconErr v-else>
        <van-icon name="warning" class="iconErr"/>
      </template>
    </LNotify>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getLoginApi } from '@/api/index.js'
import { setToken } from '@/utils/locaToken.js'
import LNotify from '@/components/packaging/L-Notify.vue'

export default {
  name: 'loginIndex',
  components: {
    LNotify
  },
  data () {
    return {
      user: {
        email: '123456789@163.com',
        password: ''
      },
      btn: true, // 登录按钮
      checked: false, // 单选框
      // hintShow: true, // 提示用户 用网易邮箱登录
      visibleShow: false, // 弹窗组件 显示
      loadingShow: true, // 加载动画 显示
      loginErr: '退出成功', // 通知文字
      iconOk: true// 登陆成功/失败图标
    }
  },
  methods: {
    // 登录按钮事件
    async onSubmit () {
      // 判断是否勾选隐私政策
      if (this.checked === false) {
        Toast({
          message: '请勾选隐私政策',
          duration: 1500
        })
      }
      if (this.checked === true) {
        this.visibleShow = true
        this.loadingShow = true
        this.btn = !this.btn
        try {
          const { data: res } = await getLoginApi(this.user)
          // console.log(res)
          if (res.status === 201) {
            setTimeout(() => {
              this.visibleShow = false
              // 本地存储token
              setToken(res.token)
              this.$store.state.isLogin = true

              // 登录用户信息存vuex
              this.$store.commit('setUserInfoData', res.data[0])
              this.$store.commit('setUser', this.user)
              this.$router.replace({ name: 'Home', params: { LoginOkMsg: true } })
            }, 1800)
          } else if (res.status === 403) {
            this.iconOk = false
            setTimeout(() => {
              this.loadingShow = false
              this.loginErr = '账号 / 密码错误'
              setTimeout(() => {
                this.visibleShow = false
                this.btn = true
              }, 1500)
            }, 1800)
            // 账号密码错误通知信息
          }
        } catch (err) {
          // 登录失败
          this.iconOk = false
          setTimeout(() => {
            this.loadingShow = false
            this.loginErr = '登录失败 请检查网络'
            setTimeout(() => {
              this.visibleShow = false
              this.btn = true
            }, 1500)
          }, 1800)
        }
      }
    },

    // 跳转手机号注册页面
    registerFn () {
      this.$router.replace({
        path: '/register'
      })
    },
    // 跳转忘记密码页面
    forgetFn () {
      this.$router.replace({
        path: '/forget'
      })
    }
  },
  mounted () {
    this.loadingShow = false
    this.visibleShow = this.$route.params.quitOkMsg
    // console.log(111)
    setTimeout(() => {
      this.visibleShow = false
    }, 1800)
    // 隐藏 提示
    // setTimeout(() => {
    //   this.hintShow = false
    // }, 5000)
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  margin-bottom: 10px;
}
/deep/.van-nav-bar__content {
  height: 60px;
}
.buttonBox {
  margin: 20px;
}
.van-checkbox {
  font-size: 12px;
  margin: 20px 30px;
}
/deep/.van-checkbox__icon .van-icon {
  border: 1px solid #07c160;
  width: 19px;
  height: 19px;
}
/deep/.van-field__error-message {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
}
/deep/[class*="van-hairline"]::after {
  border: 0;
}
/deep/.van-nav-bar .van-icon {
  color: #000000;
  font-size: 25px;
}
.sjzc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  font-size: 14px;
  font-weight: 400;
  color: #aaaaaa;
}
.van-toast {
  margin: 20px 15px;
  color: red !important;
}
.van-toast__text {
  color: green;
}
.van-cell {
  padding: 10px 30px;
}
/deep/.van-checkbox__label {
  color: #07c160;
}
/deep/ .iconErr{
  color: #eb400c !important;
}
/deep/.van-divider{
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  span{
    padding: 5px;
  }
}
</style>
